<template>
  <!-- 新增ICF签署 -->
  <page-header-wrapper @back="()=>this.$router.go(-1)">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <!-- 操作按钮 start -->
        <div class="table-operator">
          <a-button type="primary" @click="sendICFFile()">发送ICF文件</a-button>
        </div>
        <!-- 操作按钮 end -->
        <!-- 展示基本信息 start -->
        <a-descriptions title="基本信息" />
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="经办人员">
                <a-input v-model="queryParam.person" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="申请日期">
                <!-- <a-input v-model="queryParam.person" /> -->
                <a-date-picker v-model="queryParam.applyDate" @change="handleDateChange" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="选择项目">
                <a-select v-model="queryParam.site" placeholder="请选择" default-value="">
                  <a-select-option v-for="item in siteList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="选择中心">
                <a-select v-model="queryParam.status" placeholder="请选择" default-value="">
                  <a-select-option v-for="item in signatureStatus" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="选择ICF">
                <a-select v-model="queryParam.icf" placeholder="请选择" default-value="">
                  <a-select-option v-for="item in icfList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <!-- 展示基本信息 end -->
        <!-- 选择患者 start -->
        <div class="ant-descriptions-title">
          <span>选择患者 &nbsp;&nbsp;</span>
          <span>已选&nbsp;</span>
          <span class="patient-amount">{{ selectedPatientAmount }}</span>
          <span>&nbsp;人</span>
        </div>
        <s-table
          ref="table"
          size="default"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: rowSelection}"
          :row-key="record => record.id"
          :data="dataTable"
        >
          <a-table-column title="患者编号" align="center" data-index="id" />
          <a-table-column title="所属项目" align="center" data-index="roleId" />
          <a-table-column title="所属中心" align="center" data-index="phone" />
        </s-table>
        <!-- 选择患者 end -->
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { fetchUserList } from '@/api/account/user'
export default {
  data () {
    return {
      queryParam: {},
      signatureStatus: [],
      siteList: [],
      icfList: [],
      selectedGroud: [], // 选择的rows集
      selectedRowKeys: [], // 选择的row集id
      selectedPatientAmount: 0,
      dataTable: parameter => {
        return fetchUserList(Object.assign(parameter, this.queryParam))
          .then(res => {
            console.log(res, '获取的签署文件列表信息')
            return res
          })
          .catch(() => {})
      }
    }
  },
  created () {
  },
  methods: {
    // 处理发起日期选择框改变时产生的回调
    handleDateChange (date, dateString) {
      console.log(date, '****date 时间范围选择框发生了改变**')
      console.log(dateString, '****dateString 时间范围选择框发生了改变**')
      // this.queryParam.applyDate = dateString // 此行代码会发生警告 但可直接获取queryParam需要的参数
      console.log(this.queryParam.applyDate, '打印queryParam.applyDate')
    },
    sendICFFile () {
      console.log('发送icf文件')
    },
    // 监听选中项
    rowSelection (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedGroud = selectedRows
      // this.selectedPatientAmount = `选择患者 已选${selectedRowKeys.length}人`
      this.selectedPatientAmount = selectedRowKeys.length
      console.log(selectedRowKeys, '选择的id')
      console.log(selectedRows, '选择的所有数据')
    }
  }
}
</script>

<style scoped lang=less>
  .ant-descriptions-title {
    .patient-amount {
      color: blue;
    }
  }
</style>
